<template><!--轮播图组件-->
    <div class="slide-show" @mouseover="clearInt" @mouseout="runInt">
        <div class="slide-img">
            <a :href="slides[nowIndex].href">
                <transition name="slide-trans">
                    <img v-if="isShow" :src="slides[nowIndex].src">
                </transition>
                <transition name="slide-trans-old">
                    <img v-if="!isShow" :src="slides[nowIndex].src">
                </transition>
            </a>
        </div>
        <h2>{{ slides[nowIndex].title }}</h2>
        <ul class="slide-pages">
            <li @click="goto(preIndex)">&lt;</li>
            <li v-for="(item,index) in slides" @click="goto(index)">
                <a :class="{on:index === nowIndex}">{{index + 1}}</a>
            </li>
            <li @click="goto(nextIndex)">&gt;</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: {
             slides: {
                type : Array,      //轮播图导入
                default:[]
             },
             inv: {
                type: Number,      //轮播图定时
                default: 2000
             }
        },data () {
            return {
                nowIndex:0,     //索引
                isShow:true     //动画条件
            }
        },
        computed:{
           preIndex(){
            if(this.nowIndex === 0 ){
                return this.slides.length - 1
            } else {
                return this.nowIndex - 1
            }
           },
           nextIndex(){
            if(this.nowIndex === this.slides.length - 1){
                return 0
            } else {
                return this.nowIndex + 1
            }
           }
        },
        methods:{
            goto(index){
                this.isShow=false
                setTimeout(()=>{
                    this.isShow=true         //10毫秒延迟后赋值将轮播图打开，仅仅是为了触发isShow和!isShow的转换
                    this.nowIndex  = index    //当我点击第0个a的时候，把index赋值给nowIndex
                    //this.$emit('onchange',index)   //监听这个值,一旦改变，就在父级触发该方法
                },10)
            }
            /*,nextIndex(){    //也可以用这个，但是考虑到vue的特性，还是使用computed
                this.nowIndex += 1
                if(this.nowIndex === this.slides.length){
                    this.nowIndex = 0
                }},preIndex(){
                this.nowIndex -= 1
                if(this.nowIndex === -1){
                    this.nowIndex = this.slides.length-1
                    invId= setinterval(function(){
                         this.nowIndex += 1
                    },this.invTime)
                }}*/
                ,runInt (){
                    this.invId = setInterval(() =>
                    {
                        this.goto(this.nextIndex)    //轮播图定时器
                    },this.inv)
                },
                clearInt(){
                    clearInterval(this.invId)   //暂停定时器
                }
        }
        ,mounted (){
            this.runInt()
        }
    }
</script>
<style scoped>
.slide-trans-enter-active {
  transition: all .5s;
}
.slide-trans-enter {
  transform: translateX(900px);
}
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-900px);
}
.slide-show {
  position: relative;
  margin: 15px 15px 15px 0;
  width: 900px;
  height: 500px;
  overflow: hidden;
}
.slide-show h2 {
  position: absolute;
  width: 100%;
  height: 100%;
  color: #fff;
  background: #000;
  opacity: .5;
  bottom: 0;
  line-height: 30px;
  height: 30px;
  text-align: left;
  padding-left: 15px;
}
.slide-img {
  width: 100%;
}
.slide-img img {
  width: 100%;
  position: absolute;
  top: 0;
}
.slide-pages {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.slide-pages li {
  display: inline-block;
  padding: 0 10px;
  cursor: pointer;
  color: #fff;
  z-index: 99
}
.slide-pages li .on {
  text-decoration: underline;
}
</style>